<!--
 * @Descripttion: 
 * @version: 根据elementUI样式增加季度选择器
 * @Author: 尹伊
 * @Date: 2021-11-24 11:20:39
 * @LastEditors: 尹伊
 * @LastEditTime:  2021-11-24 11:20:39
-->
<template>
  <div class="block">
    <el-popover
      placement="bottom"
      v-model="visible"
      popper-class="date-popover"
      width="350"
      trigger="click"
    >
      <li class="show6">
        <p class="show6P">
          <span>
            <button
              type="button"
              aria-label="前一年"
              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
              @click="prev"
            ></button>
          </span>
          <span role="button" class="span-year" v-if="!showYear" @click="handleClickYear">{{year}}年</span>
          <span role="button" class="span-year" v-else>{{startYear}}年-{{startYear + 9}}年</span>
          <span>
            <button
              type="button"
              aria-label="后一年"
              @click="next"
              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
            ></button>
          </span>
        </p>
        <div class="selectMonth">
          <template v-if="!showYear">
            <p
              v-for="(item,index) in fullMonth"
              :key="index"
              :class="currentDate === item ? 'activeDate' : ''"
              @click.stop="choseHalfYear(item)"
            >{{item}}</p>
          </template>
          <template v-else>
            <p
              v-for="index in 10"
              :key="index"
              :class="currentDate === startYear + index - 1 ? 'activeDate' : ''"
              @click.stop="choseYear(startYear + index - 1)"
            >{{startYear + index - 1}}</p>
          </template>
        </div>
      </li>
      <el-input
        slot="reference"
        prefix-icon="el-icon-date"
        v-model="dataValue"
        clearable
        placeholder="请选择"
        style="width: 13.75rem;"
      ></el-input>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      time: "",
      dataType: "year",
      year: new Date().getFullYear(),
      fullMonth: ["1季度", "2季度", "3季度", "4季度"],
      status: "",
      showTimehalfYear: false,
      currentDate: "",
      showYear: false,
      startYear: "",
      visible: false
    };
  },
  computed: {
    dataValue: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit("input", v);
      }
    }
  },

  watch: {
    dataValue(v) {
      if (!v) {
        this.currentDate = "";
      }
    },
    visible(v) {
      if (v) {
        this.showYear = false;
      }
    }
  },

  methods: {
    prev() {
      if (this.showYear) {
        this.startYear = this.startYear * 1 - 10;
      } else {
        this.year = this.year * 1 - 1;
      }
    },
    next() {
      if (this.showYear) {
        this.startYear = this.startYear * 1 + 10;
      } else {
        this.year = this.year * 1 + 1;
      }
    },
    choseHalfYear(v) {
      this.dataValue = this.year + "-" + v;
      this.visible = false;
      this.currentDate = v;
    },
    choseYear(v) {
      this.year = v;
      this.showYear = false;
      if (this.currentDate) {
        this.dataValue = this.year + "-" + this.currentDate;
      }
    },
    // 选择年面板
    handleClickYear() {
      this.startYear = parseInt(this.year / 10) * 10;
      this.showYear = true;
    }
  }
};
</script>

<style scoped lang="scss">
.date-popover {
}

.activeDate {
  color: #0080ff;
  // background-color: #0080ff;
  // color: #fff;
  // border-radius: 16px;
  // &:hover {
  //   color: #fff !important;
  // }
}

.show6 {
  // width: 322px;
  // margin-top: 5px;
  // position: absolute;
  z-index: 2;
  /* height: 272px; */
  // height: 110px;
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 0 10px;
  box-sizing: border-box;
  list-style: none;
  font-size: 14px;
}

.show6P {
  width: 100%;
  height: 43px;
  line-height: 43px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
}

.show6:nth-child(1) span {
  display: inline-block;
  height: 100%;
  line-height: 43px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectMonth {
  width: 100%;
  // height: 14.3125rem;
  height: calc(100% - 43px);
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: flex-start;
}

.selectMonth p {
  // width: 25%;
  width: 55px;
  // height: 25%;
  text-align: center;
  // line-height: 4rem;
  height: 35px;
  line-height: 35px;
  margin: 10px;
}

.selectMonth p:hover {
  // background: rgba(19, 131, 255, 0.052);
  color: #0080ff;
  cursor: pointer;
}

.span-year {
  width: 90%;
  margin: 0 auto;
  display: inline-block;
  float: left;
  text-align: center;
  line-height: 40px;
  &:hover {
    color: #0080ff;
    cursor: pointer;
  }
}

.el-input {
  width: 215px;
  height: 38px;
  display: inline-block;
}
</style>